<template>
  <el-table
    :data="tableData"
    highlight-current-row
    stripe
    style="width: 100%"
    size="mini"
    v-loading="loading"
    ref="customerTable"
    @selection-change="handleSelectionChange"
    :max-height="tableHeight"
  >
    <el-table-column type="selection" width="50"> </el-table-column>

    <template v-for="item in tableHeader">
      <el-table-column v-if="['dropdown', 'radio', 'checkbox'].includes(item.type)" :prop="item.prop" :label="item.label">
        <template slot-scope="scope">
          <span>{{showFieldDesc('field', item.type, item._id, scope.row[item.prop] || [])}}</span>
        </template>
      </el-table-column>
      <template v-else>
        <el-table-column v-if="treatProp.indexOf(item.prop) < 0" :prop="item.prop" :label="item.label"> </el-table-column>
        <el-table-column v-else-if="item.prop === 'phone'" :prop="item.prop" :label="item.label">
          <template slot-scope="scope">
            <span class="c-phone-or-email" v-for="(phone, index) in scope.row.phone" :key="index">
              <span>{{ hideTel(phone.tel) }}</span>
              <span v-if="phone.memo">({{ phone.memo }})</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.prop === 'email'" :prop="item.prop" :label="item.label">
          <template slot-scope="scope">
            <span class="c-phone-or-email" v-for="(email, index) in scope.row.email" :key="index">
              <span>{{ hideTel(email.email) }}</span>
              <span v-if="email.memo">({{ email.memo }})</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.prop === 'weixin'" :prop="item.prop" :label="item.label">
          <template slot-scope="scope">
            <span class="c-phone-or-email" v-for="(weixin, index) in scope.row.weixin" :key="index">
              <span>{{ hideTel(weixin.num) }}</span>
              <span v-if="weixin.memo">({{ weixin.memo }})</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column v-else-if="['province'].includes(item.prop)" :prop="item.prop" :label="item.label">
          <template slot-scope="scope">
            {{showFieldDesc(item.prop, scope.row[item.prop])}}
          </template>
        </el-table-column>
        <el-table-column v-else-if="['city'].includes(item.prop)" :prop="item.prop" :label="item.label">
          <template slot-scope="scope">
            {{showFieldDesc(item.prop, scope.row[item.prop], scope.row.province)}}
          </template>
        </el-table-column>
        <el-table-column v-else-if="['district'].includes(item.prop)" :prop="item.prop" :label="item.label">
          <template slot-scope="scope">
            {{showFieldDesc(item.prop, scope.row[item.prop], scope.row.city, scope.row.province)}}
          </template>
        </el-table-column>
        <el-table-column v-else-if="['custsource1'].includes(item.prop)" :prop="item.prop" :label="item.label">
          <template slot-scope="scope">
            {{showFieldDesc('source', scope.row[item.prop] )}}
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.prop === 'name'" show-overflow-tooltip :prop="item.prop" :label="item.label">
          <template slot-scope="scope">
            <span
              class="iconfont icon-yuandian icon-yuandian-color4"
              v-if="scope.row.isRead && activeName === 'customer_my'"
            ></span>
            <span class="name-span" @click="previewFun(scope.row)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.prop === 'status'" :prop="item.prop" show-overflow-tooltip :label="item.label">
          <template slot-scope="scope">
            <span v-statusColor="scope.row.status" class="iconfont icon-yuandian"></span>
            {{ statusFun(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.prop === 'title'" show-overflow-tooltip :prop="item.prop" :label="item.label">
          <template slot-scope="scope">
            <span class="">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.prop === 'notifyTime'" :prop="item.prop" :label="item.label">
          <template slot-scope="scope">
            <span :class="[notifyTimeClass(scope.row.notifyTime)]">{{ scope.row.notifyTime }}</span>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.prop === 'owner'" show-overflow-tooltip :prop="item.prop" :label="item.label">
          <template slot-scope="scope">
            <agent :id="scope.row.owner"> </agent>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.prop === 'action'" show-overflow-tooltip :prop="item.prop" :label="item.label">
          <template slot-scope="scope">
            {{ scope.row.action }}
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.prop === 'contactCus'" :prop="item.prop" :label="item.label">
          <template slot-scope="scope">
            <div class="clearfix">
              <span
                :class="[
                  'info',
                  scope.row.phone && scope.row.phone.tel && scope.row.phone.tel.length === 0 ? 'disable' : ''
                ]"
                v-if="flag !== 'ecommerce'"
              >
                <phone :phone="{ tel: scope.row.phone || [], type: 'call' }"></phone>
              </span>
              <span
                :class="[
                  'info',
                  scope.row.phone && scope.row.phone.tel && scope.row.phone.tel.length === 0 ? 'disable' : ''
                ]"
                v-if="!isSMS"
                style="text-align: center"
              >
                <el-tooltip
                  effect="dark"
                  :content="$t('public.monitorVerTip')"
                  :openDelay="200"
                  transition="fade-leave"
                  placement="bottom"
                  v-if="isMonitorVersion"
                >
                  <span class="iconfont icon-duanxin1" style="cursor: not-allowed"></span>
                </el-tooltip>
                <phone :phone="{ tel: scope.row.phone || [], type: 'tlak' }" v-else></phone>
              </span>
              <span
                :class="['info', scope.row.email && scope.row.email.length === 0 ? 'disable' : '']"
                v-if="flag !== 'ecommerce'"
              >
                <email :email="scope.row.email || []"></email>
              </span>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column :label="item.label" width="120px" fixed="right" v-else>
          <template slot-scope="scope">
            <el-button type="text" @click="previewFun(scope.row)" size="small">查看</el-button>
            <el-button type="text" @click="deleteFun(scope.row)" size="small" v-if="isDelete">删除</el-button>
            <el-button type="text" @click="asignwFun(scope.row)" size="small" v-if="isAssign">分配</el-button>
          </template>
        </el-table-column> -->
      </template>
    </template>
    <el-table-column label="操作" width="120px" fixed="right">
      <template slot-scope="scope">
        <el-button type="text" @click="previewFun(scope.row)" size="small">查看</el-button>
        <el-button type="text" @click="deleteFun(scope.row)" size="small" v-if="isDelete">删除</el-button>
        <el-button type="text" @click="asignwFun(scope.row)" size="small" v-if="isAssign">分配</el-button>
      </template>
    </el-table-column>
    <el-table-column fixed="right" width="50">
      <template slot="header" slot-scope="scope">
        <el-popover
          placement="bottom-end"
          title="自定义表头"
          width="200"
          trigger="click">
          <div>
          <div class="item">
            <searchBox :headerData="searchBoxHeader" @onCheckChange="handleCheckChange" ></searchBox>
          </div>
          </div>
          <span slot="reference" class="icon iconfont icon-gongjulanshezhi"></span>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { statusCustColorArr } from '@/utils/reportUtils'
import Agent from '@/components/public-modules/cache/Agent'
import Phone from '@/components/public-modules/contact-summary/Phone.vue'
import Email from '@/components/public-modules/contact-summary/Email.vue'
import searchBox from '@/components/business-modules/customer/base/searchCheckbox.vue'
import { isHasFunc, checkHideTel } from '@/utils/m7Utils.js'
import {
  getNotifyDate,
  isAllowDeleteCustomer,
  isNotAllowEditCustomerInfo,
  isAllowAssignCustomer,
  showFieldDesc,
  getCityValue
} from '@/utils/customerUtils.js'

export default {
  data() {
    return {
      tableHeight: document.body.clientHeight - 150,
      treatProp: ['operation', 'status', 'contactCus', 'name', 'owner', 'notifyTime', 'title', 'action', 'phone', 'email', 'weixin', 'district', 'province', 'city', 'custsource1'],
      statusColors: statusCustColorArr,
      isMonitorVersion: false,
      isSMS: true,
      isAssign: false,
      isDelete: false,
      flag: this.$store.getters.isEcommerce ? 'ecommerce' : 'kf' // 是否是电商平台
    }
  },
  props: {
    tableData: {
      type: Array,
      default: []
    },
    tableHeader: {
      type: Array,
      default: []
    },
    loading: {
      type: Boolean,
      default: false
    },
    activeName: {
      type: String,
      default: 'customer_my'
    },
    searchBoxHeader: {
      type: Array,
      default: () => []
    },
    isShowCustomerCol: {
      type: Boolean,
      default: false
    }
  },
  directives: {
    // 自定义指令 改变文字color的值
    statusColor: {
      inserted(el, binding, vnode) {
        let self = vnode.context
        let custTmpls = self.$getCache('custTmpls')
        let statusConfig = {}
        if (custTmpls && custTmpls[0]) {
          statusConfig = custTmpls[0].statusConfig
        }
        if (binding.value) {
          if (statusConfig && statusConfig[binding.value]) {
            el.style.color = statusConfig[binding.value].color
          } else {
            el.style.color = self.statusColors[binding.value] ? self.statusColors[binding.value] : '#009FE3'
          }
        }
      },
      update(el, binding, vnode) {
        let self = vnode.context
        let custTmpls = self.$getCache('custTmpls')
        let statusConfig = {}
        if (custTmpls && custTmpls[0]) {
          statusConfig = custTmpls[0].statusConfig
        }
        if (binding.value) {
          if (statusConfig && statusConfig[binding.value]) {
            el.style.color = statusConfig[binding.value].color
          } else {
            el.style.color = self.statusColors[binding.value] ? self.statusColors[binding.value] : '#009FE3'
          }
        }
      }
    }
  },
  methods: {
    hideTel(tel) {
      return checkHideTel(tel, this.$store.state.session.user)
    },
    showFieldDesc(type, val, ...args) {
      return showFieldDesc(type, val, ...args)
    },
    notifyTimeClass(date) {
      const obj = getNotifyDate(date)
      return obj ? obj.type : ''
    },
    statusFun(status) {
      let custTmpls = this.$getCache('custTmpls')
      if (status && custTmpls[0]) {
        let cs = custTmpls[0].status[status]
        if (cs) {
          return cs
        } else {
          return this.$t('customer.deleteStatus')
        }
      } else {
        return this.$t('customer.deleteStatus')
      }
    },
    previewFun(val) {
      this.$emit('operate', { data: val, action: 'previewFun' })
    },
    deleteFun(val) {
      this.$emit('operate', { data: val, action: 'deleteFun' })
    },
    asignwFun(val) {
      this.$emit('operate', { data: val, action: 'asignwFun' })
    },
    changeStatusFun(val) {
      this.$emit('operate', { data: val, action: 'changeStatusFun' })
    },
    handleSelectionChange(selection) {
      this.$emit('selectionchange', selection)
    },
    clearSelection() {
      this.$refs.customerTable.clearSelection()
    },
    checkAll() {
      this.tableData.forEach((item) => {
        this.$refs.customerTable.toggleRowSelection(item, true)
      })
      this.$emit('selectionall')
    },
    handleCheckChange(dataList, isInit) {
      this.$emit('searchBox-change', dataList, isInit)
    }
  },
  beforeMount() {
    let user = this.$store.state.session.user
    if (isHasFunc('func_sort_phone_bar_send_sms', user)) {
      // 短信权限
      this.isSMS = false
    }
    if (!isNotAllowEditCustomerInfo(user) && isAllowDeleteCustomer(user)) {
      this.isDelete = true
    }
    if (!isNotAllowEditCustomerInfo(user) && isAllowAssignCustomer(user)) {
      this.isAssign = true
    }
    if (user.uversion && user.uversion === 'monitor') {
      // 是否是监控版，监控版本不允许发送短信
      this.isMonitorVersion = true
    }
  },
  components: {
    Agent,
    Phone,
    Email,
    searchBox
  }
}
</script>
<style lang="stylus" scoped>
.icon-yuandian
  vertical-align middle
.icon-yuandian-color4
  font-size 12px
  margin-left -12px
  color #FF6B6B
.info
  width 30px
  height 30px
  line-height 30px
  display inline-block
  float left
  cursor pointer
.overdue
  color #ff6b6b
.today-action
  color #ff8403
.name-span
 color #54a2e9
 text-decoration underline
 cursor pointer
</style>
